<template>
  <div class="life-container">
    <div class="header flex justify-content-space-between align-center">
      <el-input v-model="input2" class="responsive-input" placeholder="搜索活动主题、地点" :prefix-icon="Search"/>
      <el-button  type="primary" icon="Search" @click="handleQuery" style="margin-left: 12px">搜索</el-button>
      <el-button  type="primary" icon="Plus" @click="addActive">新建活动</el-button>
    </div>

    <div class="card-wrapper flex justify-content-space-between align-center" style="margin-top: 20px;">

      <div class="card-item flex flex-auto" style="border-radius: 5px;padding: 30px 20px">
         <img src="" alt="" style="width: 50px;height: 50px" class="border">
         <div class="flex-auto" style="padding-left: 15px;color: #6A727D">
             <div>本月已完成活动</div>
             <div>较上月增长8%</div>
         </div>
         <div style="font-size: 36px;font-weight: bolder;color: #333">12</div>
       </div>

      <div class="card-item flex flex-auto" style="margin: 0 20px;padding: 30px 20px;border-radius: 5px">
        <img src="" alt="" style="width: 50px;height: 50px" class="border">
        <div class="flex-auto" style="padding-left: 15px;color: #6A727D">
          <div>本月待开展活动</div>
          <div>近期待开展</div>
        </div>
        <div style="font-size: 36px;font-weight: bolder;color: #333">12</div>
      </div>

      <div class="card-item flex flex-auto"  style="border-radius: 5px;padding: 30px 20px">
        <img src="" alt="" style="width: 50px;height: 50px" class="border">
        <div class="flex-auto" style="padding-left: 15px;color: #6A727D">
          <div>本月所有活动</div>
          <div>进行中3个</div>
        </div>
        <div style="font-size: 36px;font-weight: bolder;color: #333">12</div>
      </div>
    </div>

    <div class="card-wrapper">
      <div style="font-size: 22px;color: #333333;font-weight: bolder;margin-top: 20px">活动类型</div>
      <!--  卡片  -->
      <el-row :gutter="20">
        <el-col  v-for="(item, index) in activityList" :key="index" class="hover-container" style="perspective: 1000px;position: relative;margin-top: 20px;" :xs="24" :sm="12" :md="12" :lg="6">
          <el-card  class="padding-top-bottom-16" style="padding:20px 30px;">
            <div class="icon-box flex align-center justify-content-center" style="border: 1px solid red;padding: 25px 0;border-radius: 10px">
              <img src="" alt="" style="width: 40px;height: 40px;">
            </div>
            <div class="active-type-title">{{item.title}}</div>
            <div class="active-type-desc">{{item.desc}}</div>
            <el-button  type="primary" style="width: 100%;height: 45px;font-size: 16px">创建活动</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="table-container">
      <div style="font-size: 22px;color: #333333;font-weight: bolder;margin-top: 20px">近期活动</div>
      <el-table :data="activities" style="width: 100%;margin-top: 20px;padding-bottom: 20px">
        <el-table-column label="活动主题" align="center">
          <template #default="{ row }">
            <div class="activity-title flex align-center">
              <img src="" style="width: 40px;height: 40px;display: block" alt="">
              <div style="padding-left: 20px">
                <div style="font-weight: bolder">{{ row.title }}</div>
                <div style="color: #999">{{ row.subtitle }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="时间地点" align="center">
          <template #default="{ row }">
            <div style="color: black;">{{ row.time }}</div>
            <div style="color: #999">{{ row.location }}</div>
          </template>
        </el-table-column>
        <el-table-column label="参与情况" align="center">
          <template #default="{ row }">
            <div style="color: black">{{ row.participation }}</div>
            <div style="color: #999">{{ row.attendanceRate }}</div>
          </template>
        </el-table-column>
        <el-table-column label="活动状态" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作"  align="center">
          <template #default="{ row }">
            <el-button size="small" icon="View" text @click="handleView(row)">查看</el-button>
            <el-button size="small" icon="edit" text type="primary" @click="handleEdit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="position:relative;padding-bottom: 20px">
        <pagination
            :total="activities.length"
            v-model:page="tableDataPage.pageNumber"
            v-model:limit="tableDataPage.pageSize"
            @pagination="getTableDataPageList" />
      </div>
    </div>


    <!-- 活动创建&编辑 -->
    <CreateActivityDialog v-model="dialogVisible" @save="handleSave"/>

    <!-- 活动详情 -->
    <ActivityDetailDialog v-model="detailDialog" :activity="currentActivity" @edit="handleEditDetail" @sign-manage="handleSignManageDetail"/>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { Search,Plus } from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";
import CreateActivityDialog from './component/CreateActivityDialog.vue';
import ActivityDetailDialog from './component/ActivityDetailDialog.vue';
const input2 = ref('');
const dialogVisible = ref(false);
const activityList = [
  {
    title: '三会一课管理',
    desc: '支委会、党小组会、党员大会、党课',
    btnText: '创建活动',
    bgColor: '#fdeeed', // 卡片背景色
    iconClass: 'el-icon-user-solid' // Element Plus 图标类名，也可换自定义图标
  },
  {
    title: '主题党日活动',
    desc: '活动策划、党员报名、记录上传、宣传报道',
    btnText: '创建活动',
    bgColor: '#e9f1fd',
    iconClass: 'el-icon-flag'
  },
  {
    title: '公益与社会责任',
    desc: '党支部组建服务队，定期开展义诊、健康宣教',
    btnText: '创建活动',
    bgColor: '#f9eefa',
    iconClass: 'el-icon-chat-dot-round'
  },
  {
    title: '会议签到管理',
    desc: '二维码签到、定位签到、人工补录、签到统计',
    btnText: '进入管理',
    bgColor: '#fdf6d9',
    iconClass: 'el-icon-menu'
  }
];
// 模拟数据
const activities = ref([
  {
    id: 1,
    title: '第三季度支部党员大会',
    subtitle: '三会一课',
    time: '2025-09-15 14:00',
    location: '行政楼3楼会议室',
    participation: '32/35',
    attendanceRate:"91%出席率",
    status: '已结束',
    type: 'party'
  },
  {
    id: 2,
    title: '不忘初心 牢记使命 主题党日',
    subtitle: '主题党日',
    time: '2025-10-10 09:00',
    location: '革命纪念馆',
    participation: '32/35',
    attendanceRate:"91%出席率",
    status: '进行中',
    type: 'theme'
  },
  {
    id: 3,
    title: '2023年度组织生活会',
    subtitle: '民主生活会',
    time: '2025-11-05 13:30',
    location: '行政楼3楼会议室',
    participation: '-',
    attendanceRate:"未开始",
    status: '未开始',
    type: 'life'
  },
  {
    id: 4,
    title: '第三季度支部党员大会',
    subtitle: '三会一课',
    time: '2025-09-15 14:00',
    location: '行政楼3楼会议室',
    participation: '32/35',
    attendanceRate:"91%出席率",
    status: '已结束',
    type: 'party'
  },
  {
    id: 5,
    title: '不忘初心 牢记使命 主题党日',
    subtitle: '主题党日',
    time: '2025-10-10 09:00',
    location: '革命纪念馆',
    participation: '32/35',
    attendanceRate:"91%出席率",
    status: '进行中',
    type: 'theme'
  },
  {
    id: 6,
    title: '2023年度组织生活会',
    subtitle: '民主生活会',
    time: '2025-11-05 13:30',
    location: '行政楼3楼会议室',
    participation: '-',
    attendanceRate:"未开始",
    status: '未开始',
    type: 'life'
  },
]);
// 肿瘤专业医疗质量控制指标
const tableDataPage = ref({
      pageNumber: 1, // 当前页
      totalCount:0,
      pageSize:10,
      totalPages:0
    });

// 获取状态标签类型
const getStatusType = (status) => {
  switch (status) {
    case '已结束':
      return 'success';
    case '进行中':
      return 'warning';
    case '未开始':
      return 'info';
    default:
      return 'info';
  }
};

// 查看操作
const handleView = (row) => {
  detailDialog.value = true;
};

// 编辑操作
const handleEdit = (row) => {
  ElMessage.info(`编辑活动：${row.title}`);
};

const getTableDataPageList = () => {};

const handleBtnClick = (item) => {
  console.log('点击了', item.title, '按钮', item.btnText)
}

const handleQuery = ()=>{};

const addActive = ()=>{
  dialogVisible.value = true;
};

const handleSave = (data) => {
  console.log('保存的数据:', data);
  // 这里可以调用 API 保存数据
};


const detailDialog = ref(false);
const currentActivity = {
  title: '学习贯彻党的二十大精神专题研讨会',
  type: 'theme',
  time: '2025年11月15日 14:00 - 17:00\n星期三下午',
  location: '市委党校 3号楼 201会议室\n北京市海淀区大有庄100号',
  content: '<p>本次专题研讨会旨在深入学习贯彻医院党建工作精神，全面提升医疗服务质量...</p>',
  images: [
    '/images/activity1.jpg',
    '/images/activity2.jpg',
    '/images/activity3.jpg'
  ],
  files: [
    { name: '党的二十大精神学习材料.pdf', size: '3.2 MB' },
    { name: '研讨会发言提纲.docx', size: '1.5 MB' }
  ],
  responsible: {
    name: '张建国',
    title: '党支部书记'
  },
  totalCount: 48,
  leaveCount: 3,
  signRate: 93.3,
  checkedCount: 45,
  participants: [
    '王卫东', '李红梅', '陈志强', '刘芳',
    '赵明', '周建华', '黄伟', '吴晓丽',
    '郑国强', '孙丽华', '马建军', '林小燕',
    '张晓峰', '徐海燕', '杨光', '朱明亮',
    '程志远', '曹梅', '韩雪', '江涛',
    '谢婷婷', '潘建国', '魏巍', '冯小刚',
    '董华', '梁红', '邓超', '唐军',
    '萧敏', '许婷', '范海峰', '金明'
  ]
};

const openDialog = () => {
  dialogVisible.value = true;
};

const handleEditDetail = () => {
  console.log('编辑活动');
};

const handleSignManageDetail = () => {
  console.log('签到管理');
};


</script>
<style lang='scss' scoped>
.life-container {
  height: calc(100% - 40px);
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px;
  border-radius: 5px;
  .header {
    background-color: #FFFFFF;
    padding: 20px 20px;
    border-radius: 5px;
  }
  .card-wrapper{
     border-radius: 5px;
    .card-item{
      background-color: #FFFFFF;
      padding: 20px 20px;
    }
    .active-type-title{
       font-size: 18px;
       font-weight: bolder;
       padding: 10px 0;
    }
    .active-type-desc{
      color: #333333;
      padding:0 0 10px 0;
      color: #999;
    }
  }
  .table-container{
     background-color: #FFFFFF;
  }



}


</style>
